<template>
	<view class="page">
		<view class="user" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/shouyeheader.png')">
		  <view class="guessbear" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/guessbear.png')"></view>
            <view class="user-img">
                <view class="user-img-wrap f-c f-s-0">
                    <image :src="userInfo.avatar_url || ''"></image>
                </view>
                <view class="f-g-1" >
                    <view>
                        <view class="user-name">{{userInfo.name || '未命名'}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="imgbox" @click="toHome">
          <view class="headerimg" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/wodeyemiantou.png?sign=d8492c5e6ec6214f5e60a726b0b1dd12&t=1611050304')"   bindtap="pathgo2"></view>
        </view>
        <view class="my-container">
            <view class="section order">
                <view class="f-nw f-j-b f-a-s">
                    <view class="section-top">
                        <view class="section-title">我的订单</view>
                    </view>
                    <view class="all-order" data-active='0' @click="to_order(0)">查看全部订单</view>
                </view>
                <view class="section-container">
                    <view class="order-item-wrap f-nw f-j-b">
                          <view class="order-item" @click="to_order(1)">
                              <view class="order-item__icon-wrap">
                                <view style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/daifahuo.png?sign=6d376ed9ac3d95450b9d5abac6245b67&t=1605842017')" class="i"></view>
                                  <view class="order-num" v-if="orderNum.status2 > 0">{{orderNum.status2 > 99 ? '99' : orderNum.status2 }}</view>
                              </view>
                              <view class="order-item__text">待发货</view>
                          </view>
                          <view class="order-item" @click="to_order(2)">
                              <view class="order-item__icon-wrap">
                                <view style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/daishouhuo.png?sign=094bbb6fa2de23ffc3207e1522a9f4e5&t=1605842053')" class="i"></view>
                                  <view class="order-num" v-if="orderNum.status3 > 0">{{orderNum.status3 > 99 ? '99' : orderNum.status3 }}</view>
                              </view>
                              <view class="order-item__text">待收货</view>
                          </view>
                          <view class="order-item" @click="to_order(3)">
                              <view class="order-item__icon-wrap">
                                <view style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/yiwancheng.png?sign=5fada8df4bdf1dbeab0feb02350e1252&t=1605842069')" class="i"></view>
                              </view>
                              <view class="order-item__text">已完成</view>
                          </view>
                          <view class="order-item" @click="to_order(4)">
                              <view class="order-item__icon-wrap">
                                <view style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/tuikuan.png?sign=a253c761372b38d22404a7a21a63b909&t=1605842085')" class="i"></view>
                                  <view class="order-num" v-if="orderNum.status5 > 0">{{orderNum.status5 > 99 ? '99' : orderNum.status5 }}</view>
                              </view>
                              <view class="order-item__text">退货/售后</view>
                          </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 工具 -->
          <view class="section tools">
            
            <!-- <view class="table-box3" :style="{height:yao == 1 ? '240upx' : '100upx'}">
              <view class="lable">
                <image class="imgbb" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/wodeyaoqingren.png?sign=43d35abe503b1222b92dfcc5c6629b0f&t=1606381014')" ></image>
                <view class="labletext">我的邀请人</view>
               <image class="images" :src="yao == 1? '../../static/img01/buttom.png':'../../static/img/right.png'"></image>
              </view>
              <view class="yao"  v-if="yao == 1">
                <view class="yaoimg" :style="{'background-image':`url('${people.avatar_url}')`}"></view>
                <view class="yaobox">
                  <view class="yaotop">{{people.nick_name}}</view>
                  <view class="yaotime">邀请时间：{{people.ctime}}</view>
                </view>
              </view>
            </view> -->
            <navigator class="table-box" v-for="(item,index) in list" :key="index" :url="item.url">
              <view class="lable">
                <image class="imgbb" :style="{'background-image':`url('${item.img}')`}" ></image>
                <view class="labletext">{{item.name}}</view>
               <image class="images" src="../../static/img/right.png"></image>
              </view>
            </navigator>
            <view class="table-box1">
              <navigator class="lable" url="../rules/rules">
                <view class="imgbb" style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/wodewanfa.png?sign=9b6ee8478d5fbe67db670c2d2a6fdb86&t=1605841630')"></view>
                <view class="labletext">购物规则</view>
               <image class="images" src="../../static/img/right.png"></image>
              </navigator>
            </view>
          </view>  
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
                orderNum: {
                    status2: 0,
                    status3: 0,
                    status5: 0,
                },
                list:[{
                  name:'我的钱包',
                  url:'/pages/wallet/wallet',
                  img:'https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/wodeqianbao.png?sign=679bf4bbb18067d6a9ac39a3b2f5f4a4&t=1605841642'
                },{
                  name:'关于我们',
                  url:'/pages/about/about',
                  img:'https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/guanyuwomen.png?sign=5e20d69c49fc8c38451037425540485d&t=1605841821'
                 }],
                 people: {
                     avatar_url: "https://thirdwx.qlogo.cn/mmopen/vi_32/OXBq4m1HKoqWYZvJVf9wnEYgR070QMWoUxuXkicQal6Sl4ZeMPqn7Thu83PzXwdt7sGPAtmQPAib9hmGibaWPVWeA/132",
                     nick_name: "周",
                     ctime: "2021-01-02"
                 },
                 yao: 1,
                 userInfo: {
                     avatar_url: "",
                     name: ""
                 }
			}
		},
		methods: {
			toHome() {
                uni.navigateTo({
                    url: "../tabbar/index?index=0"
                });
                location.reload()
            },
            to_order(index) {
               uni.navigateTo({
                   url: "../orderList/orderList?index="+index
               })
            },
            getUserInfo() {
                this.userInfo = uni.getStorageSync("userInfo") || {};
            }
		},
        created() {
            this.getUserInfo()
        }
	}
</script>

<style>
    .page {
        padding-bottom: 48px;
    }
    .user-img {
        position: relative; width:100%;top:80px;text-align: center;
    }
.general{
  width: 110rpx;
  height: 114rpx;
  position: fixed;
  right: 50rpx;
  top: 83%;
  background:no-repeat center center/100%
}
.guessbear{
  width: 226rpx;
  height: 40rpx;
  margin: 0 auto;
  position: relative;
  top: 110rpx;
  left: 0;
  right: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pin{
 margin-top: 40rpx;
}
.peneralimg{
  width: 250rpx;
  height: 80rpx;
  position: absolute;
  bottom: -24px;
  right: 0;
  margin: 0 auto;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.user{
  width: 100%;
  height: 460rpx;
  padding:0 30rpx;
  box-sizing: border-box;
  background-color: #32DF70;
  border-bottom-left-radius: 104rpx;
  border-bottom-right-radius: 104rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.imgbox{
  width: 96%;
    height: 190rpx;

    margin: 20rpx auto;
}

.user-details{
  margin: 0 auto;
  width: 100%;
    text-align: center;
    position: relative;
}
.user-container{
  min-height: 150rpx;
  padding-bottom: 144rpx;
}
.message-icon-wrap{
  position: absolute;
  z-index: 9991;
}
.message-icon-wrap>image{
  width:46rpx;
  height:42rpx;
}
.unread-message{
  font-size: 20rpx;
  color: #fff;
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  width: 38rpx;
  height: 38rpx;
  border-radius: 50%;
  background-color: var(--theme);
}
.user-img-wrap{
  width:124rpx;
  height:124rpx;
  border-radius: 50%;
  margin-left: 6rpx;
  margin: 0 auto;
}
.user-img-wrap2{
  background:linear-gradient(180deg, rgba(243,201,149,1), rgba(228,152,92,1))
}
.user-img-wrap3{
  background:linear-gradient(180deg, rgba(212,230,250,1), rgba(169,202,237,1))
}
.user-img-wrap4{
  background:linear-gradient(180deg, rgba(252,231,120,1), rgba(253,200,20,1))
}
.user-img-wrap>image{
  width: 116rpx;
  height: 116rpx;
  border-radius: 50%;
  border: 2px solid #eee;
}
.grade-icon{
  width:116rpx;
  height:34rpx;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -17rpx;
}

.user-name{
  font-size:36rpx;
  font-weight:500;
  color:rgba(255,255,255,1);
  line-height:50rpx;
  letter-spacing:2rpx;
}
.user-live-room-id{
  height: 40rpx;
  border-radius: 40rpx;
  border:2rpx solid #fff;
  overflow: hidden;
  margin-top: 4rpx;
  width: max-content;
}
.user-live-room-id view{
  font-size: 20rpx;
  height: 40rpx;
  color: #fff;
}
.user-live-room-id view:first-of-type{
  background-color: #C91944;
  padding-left: 16rpx;
  padding-right: 10rpx;
}
.user-live-room-id view:last-of-type{
  padding-right: 16rpx;
  padding-left: 10rpx;
}
.user-fans-guanzhu{
  margin-top: 10rpx;
}
.zhe{
  font-size: 32rpx;
    border: none;
    color: black;
}
.user-fans-guanzhu text{
  font-size:24rpx;
  font-weight:400;
  color:rgba(255,255,255,1);
  line-height:32rpx;
  margin-right: 40rpx;
  position: relative;
  padding: 10rpx 0;
}
.user-fans-guanzhu text::after{
  content:'';
  background-color: #fff;
  width:2rpx;
  height:16rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -21rpx;
}
.user-fans-guanzhu text:last-of-type::after{
  display: none;
}
/* 立即登录 */
.login-hint{
  font-size: 34rpx;
  color:white;
  text-align: center;
 padding-top: 20rpx;

}

.business-card__icon-wrap{
  width: 80rpx;
  height: 80rpx;
  margin:0 auto;
}
.business-card__text{
  width:136rpx;
  height:50rpx;
  background:rgba(255,255,255,1);
  box-shadow:0rpx 6rpx 0rpx 0rpx rgba(202,31,80,1);
  border-radius:33rpx;
  font-size:24rpx;
  font-weight:400;
  color:rgba(249,74,73,1);
  margin-top: -2rpx;
}

.section{
  width:694rpx;
  padding: 24rpx;
  box-sizing: border-box;
  border-radius: 6rpx;
  overflow: hidden;
  color: black !important;
  background-color: #fff;
  margin: 15px auto;
  box-shadow: 0rpx 0rpx 6rpx #ccc;
}
.section-top{
  width: max-content;
  position: relative;
  font-size:28rpx;
  font-weight:500;
  color:rgba(77,77,77,1);
  line-height:36rpx;
  margin-bottom: 30rpx;
}
.section-title{
  padding: 0 6rpx;
  z-index: 2;
}
.section-top::after{
  content: '';
  width: 100%;
  height:10rpx;
  
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.table-box{
  width: 100%;
  height: 100rpx;
  border-bottom: 1px solid #f1f1f1;
}
.table-box1{
  width: 100%;
  height: 100rpx;
}
.lable{
  width: 100%;
  height: 100rpx;
}
.i{
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.imgbb{
  width: 40rpx;
  height: 40rpx;
  float: left;
  margin-top: 30rpx;
  margin-right: 20rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.images{
  width: 40rpx;
  height: 40rpx;
  float: right;
  margin-top: 30rpx;
}
.labletext{
  float: left;
  color: black !important;
  line-height: 100rpx;
  font-size: 32rpx !important;
  font-style: initial !important;
  font-family: inherit !important;
}
.my-container{
  margin: 0 auto; 
  width:694rpx;
  border-radius:12rpx;
}
.order{
  width:694rpx;
  /* height:330rpx; */
  border-radius:12rpx;
  box-shadow: 0rpx 0rpx 6rpx #ccc;
}
.all-order{
  font-size:24rpx;
  font-weight:400;
  color:rgba(153,153,153,1);
  line-height:34rpx;
}

.order-item-wrap{
  padding-bottom: 32rpx;
  border-bottom: 2rpx solid #E6E6E6;
}
.order-item{
  padding-top: 16rpx;
}
.order-item__icon-wrap{
  width: 48rpx;
  height: 48rpx;
  margin: 0 auto;
  border-radius: 4rpx;
  position: relative;
}
.order-item__icon-wrap .order-num{
  width:24rpx;
  height:24rpx;
  color:#fff;
  background-color: #F72B2B;
  line-height: 24rpx;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  right: -7rpx;
  top: -7rpx;
  font-size: 16rpx;
  font-weight:400;
}
.order-item__text{
  width: 98rpx;
  text-align: center;
  font-size: 22rpx;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:32rpx;
  margin: 0 auto;
  margin-top: 12rpx;
  white-space: nowrap;
}
.my-live-order{
  font-size:30rpx;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:42rpx;
  margin-top: 24rpx;
}
.tools-item{
  width: 110rpx;
  padding: 0 50rpx;
}
.tools-item__icon-wrap{
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin: 0 auto;
  margin-bottom: 12rpx;
}
.tools-item__texr{
  font-size:26rpx;
  font-weight:400;
  color:rgba(51,51,51,1);
  line-height:36rpx;
  text-align: center;
}


.other-tools{
  padding-left: 0rpx;
  padding-right: 0rpx;
}
.other-tools .section-top{
  margin-left: 24rpx;
  margin-bottom: 15rpx;
}
.other-tools-container{
  box-sizing: border-box;
}
.other-tools-item{
  flex-shrink: 0;
  padding: 23rpx 0;
  box-sizing: border-box;
  flex-basis: 25%;
}
.other-tools-item:nth-of-type(4n){
  margin-right: 0;
}
.other-tools-item__icon-wrap{
  width: 48rpx;
  height: 48rpx;
  border-radius: 4rpx;
  margin: 0 auto;
  margin-bottom: 12rpx;
}
.other-tools-item__text{
  font-size:24rpx;
  font-weight:400;
  color:rgba(51,51,51,1);
  line-height:34rpx;
  text-align: center;
}

.fenge{
  width: 100%;
  height: 100rpx;
}
.fenge1{
  width: 100%;
  height: 168rpx;
}
.headerimg{
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.set{
      font-size: 26rpx;
      color: white;
      position: absolute;
      right: 0;
      top: 42rpx;
      border-bottom: 1rpx solid white;
}
.table-box3{
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
}
.table-box4{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #f1f1f1;
  background-color: transparent;
  font-size: 32rpx;
  font-weight: 400 !important;
}
.yao{

  width: calc(100% - 40rpx);
  height:90rpx;
  padding: 20rpx;
  display: flex;
}
.yaoimg{
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
 
}

.yaobox{
  width: calc(100% - 100rpx);
  height: 100%;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yaotime{
  color: #ccc;
}

</style>
